<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学籍查询</title>
    <link rel="stylesheet" href="../css/query.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
</head>

<body>
    <div id="root">
        <div class="header">
            <div class="search">
                <input type="text" placeholder="请输入需要查询的学生地址" v-model="keyword" @keyup.enter="filter_evidences">
                <button @click="filter_evidences"></button>
            </div>
        </div>
        <div class="content" v-for="(p, index) in stu_info" :key="index">
            <div class="con-form">
                <div class="left-side-bar">
                    <div class="left-box">
                        <div class="title">
                            <span>学籍{{index+1}}</span>
                        </div>
                        <div class="info">
                            <img src="../images/messi.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div class="right-side-bar">
                    <div class="first-form">
                        <form action="">
                            <table>
                                <tr>
                                    <td>账户地址:</td>
                                    <td>{{p.studentaccount.substr(0,18)}}</td>
                                </tr>
                                <tr>
                                    <td>姓名:</td>
                                    <td>{{p.studentname}}</td>
                                </tr>
                                <tr>
                                    <td>性别:</td>
                                    <td>{{p.sex}}</td>
                                </tr>
                                <tr>
                                    <td>出生日期:</td>
                                    <td>{{subIdCard(p.cardid)}}</td>
                                </tr>
                                <tr>
                                    <td>身份证号:</td>
                                    <td>{{p.cardid}}</td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <div class="second-form">
                        <form action="">
                            <table>
                                <tr>
                                    <td>学校名称:</td>
                                    <td>{{p.schoolname}}</td>
                                </tr>
                                <tr>
                                    <td>入学日期:</td>
                                    <td>{{p.admissiontime}}</td>
                                </tr>
                                <tr>
                                    <td>毕业日期:</td>
                                    <td>{{p.leavingtime}}</td>
                                </tr>
                                <tr>
                                    <td>所学专业:</td>
                                    <td>{{p.major}}</td>
                                </tr>
                                <tr>
                                    <td>教育类型:</td>
                                    <td v-text="p.typeofeducation?'全日制':'非全日制'"></td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <div class="stamp">
                        <span>
                            存证时间:<br>{{format(p.created)}}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                stu_info: [],
                all:[
                // {
                //     address: '0x9999999',
                //     name: '张三',
                //     gender: '男',
                //     id: '778888',
                //     sch_name: '江西师范大学',
                //     birth_date: '2002-08-06',
                //     entry_date: '2020-09-01',
                //     grad_date: '2024-07-01',
                //     prof: '软件工程',
                //     edu_type: 1,
                //     stamp_date: '2021-10-08'
                // }, {
                //     address: '0x9999999',
                //     name: '张三',
                //     gender: '男',
                //     id: '778888',
                //     sch_name: '江西师范大学',
                //     birth_date: '2002-08-06',
                //     entry_date: '2020-09-01',
                //     grad_date: '2024-07-01',
                //     prof: '软件工程',
                //     edu_type: 1,
                //     stamp_date: '2021-10-08'
                // }, {
                //     address: '0x99999888',
                //     name: '张三',
                //     gender: '男',
                //     id: '778888',
                //     sch_name: '江西师范大学',
                //     birth_date: '2002-08-06',
                //     entry_date: '2020-09-01',
                //     grad_date: '2024-07-01',
                //     prof: '软件工程',
                //     edu_type: 1,
                //     stamp_date: '2021-10-08'
                // }
                ],
                keyword: ''
            },
            methods: {
                filter_evidences() {
                    this.stu_info = this.all.filter((st) => {
                        return st.studentaccount == this.keyword;
                    })
                },
                getEvidentData() {
                    axios.get("http://localhost:80/getSignInfo").then(response => {
                        this.all = response.data.data
                    })
                },
                format(date) {
                    dt = new Date(date);
                    var year = dt.getFullYear();
                    var month = dt.getMonth() + 1;
                    var day = dt.getDate();
                    return year + '年' + month + '月' + day + '日';
                },
                subIdCard(id) {
                    return id.substr(6,4) + '-' + id.substr(10,2) + '-' + id.substr(12,2);
                }
            },
            computed:{

            },
            mounted(){
                this.getEvidentData()
            }
        },
        )
    </script>
</body>

</html>